<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>已选材料页面</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="./Select.css">
</head>
    <body>
	<div id="app">
		<h4 style="padding: 10px;" class="table_2_h4"><span @click="back()" class="glyphicon glyphicon-chevron-left" style="color: rgb(52, 52, 52);">返回</span></h4>
		<!-- 订单详情页 -->
		<div id="d1">
			<ul class="nav" v-for="(item,index) in mytabledata" :key="index">
				<li>
					<span></span>
					<span>{{index+1}}</span>
				</li>
				<li>
					<span></span>
					<span>							
							<input type="checkbox" :checked="mychecked==true" :value="index" ref='mycheck'>
					</span>
				</li>
				<li>
					<span></span>
					<span><img :src="`../DStuffXHImg/${item.DMode}.jpg`" height="80" width="50"/></span>
				</li>
				<li>
					<ul class="nav">
						<li>
							<span></span>
							<span>{{item.DName}}</span>
						</li>
						<li>
							<span></span>
							<span>{{item.DMode}}</span>
						</li>
						<li>
							<span class="label label-info">颜色:</span>
							<span>{{item.ColorName}}</span>
						</li>
						<li>
							<span class="label label-info">规格:</span>
							<span>{{item.DGge}}</span>
						</li>
						<li>
							<span class="label label-info">单价:</span>
							<span>{{item.DPrice}}</span>
						</li>
						<li >
							<span  class="label label-info">米重:</span>
							<span>{{item.DWght}}</span>
						</li>
						<li>
							<span  class="label label-info">壁厚:</span>
							<span>{{item.BiHou}}</span>
						</li>
						<li>
							<span  class="label label-info">长度:</span>
							<span>{{item.DLong}}</span>
						</li>
						<li>
							<span  class="label label-info" >数量:</span>
							<input @change="change($event,index)" type="number" style="width: 50px;height: 20px;" :value="item.DNums">
						</li>
						<li>
							<span  class="label label-danger">重量:</span>
							<span>{{item.Weight}}</span>
						</li>
						<li>
							<span  class="label label-danger">金额:</span>
							<span>{{item.SumPrice}}</span>
						</li>
					</ul>

				</li>
			</ul>
		</div>
		<!-- 底部控制 -->
		<div class="btn-group control">
			<button type="button" class="btn btn-secondary btn-lg" >确认采购</button>
			<button type="button" class="btn btn-danger btn-lg">直接删除</button>
		</div>
	
	</div>
	</body>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="../js/axios.min.js"></script>
	<script src="../js/vue.js"></script>
	<script>
		var app=new Vue({
			el:"#app",
            data() {
				return{
					//订单号
					user_id:'',
					//获取储存到本地的购物车数据
					mytabledata:[],
					//选中状态
					mychecked:false
				}
			},
			methods:{
				//关闭页面
				back(){
					//判断是否是微信
				    var ua = navigator.userAgent.toLowerCase();
				    if(ua.match(/MicroMessenger/i)=="micromessenger") {
						//兼容微信端--
						WeixinJSBridge.call('closeWindow');
				    } else {
						window.close();
				    }
				},
				// 将从页面1中跳转过来的用户id参数进行保存
				getUrlParams(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //定义正则表达式 
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
				},
				//改变数量后跟新数据
				change(e,index){
					console.log(e.target.value);
						var nowdata=this.mytabledata[index]
					// 重量=长度/1000* 米重*数量
					this.mytabledata[index].Weight=Number(nowdata.DLong/1000*nowdata.DWght*e.target.value).toFixed(2);
					this.mytabledata[index].DNums=e.target.value;
					if(nowdata.DWght){
						// 金额=单价* 重量
						this.mytabledata[index].SumPrice=nowdata.DPrice*this.mytabledata[index].Weight;
					}else{
						// 没有米重的情况下。金额=数量*单价
						this.mytabledata[index].SumPrice=nowdata.DPrice*e.target.value;
					}
				}
			},
			mounted(){
				//获取单号
				this.user_id=this.getUrlParams('id');
				//将购物车数据从本地储存中提取出来
				this.mytabledata=JSON.parse(localStorage.getItem('shopping'));
				console.log(this.mytabledata);
			}
		})


	</script>
	
</html>